<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书后台管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4080FF',
                        neutral: '#F5F7FA',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
 <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .menu-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .menu-transition {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .menu-icon {
                width: 20px;
                text-align: center;
            }
            /* 禁止选择文本样式 */
            .no-select {
                -webkit-user-select: none; /* Safari */
                -ms-user-select: none; /* IE 10 and IE 11 */
                user-select: none; /* Standard syntax */
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans no-select" oncontextmenu="return false" ondragstart="return false" onselectstart="return false">
    <div class="flex h-screen overflow-hidden">
        <aside class="w-64 bg-white shadow-lg menu-transition z-20">
            <nav class="p-4">
                <ul class="space-y-1">
                    <!-- 图书管理模块 -->
                    <li class="menu-item">
                        <button class="w-full flex items-center justify-between p-3 text-left rounded-lg hover:bg-primary/5 menu-transition" onclick="toggleSubmenu(this)">
                            <div class="flex items-center">
                                <i class="fa-solid fa-book-open text-primary mr-3 menu-icon"></i>
                                <span>图书管理</span>
                            </div>
                            <i class="fa-solid fa-chevron-down text-xs text-gray-500 menu-transition"></i>
                        </button>
                        <ul class="submenu mt-1 ml-10 space-y-1 hidden menu-transition">
                            <li>
                                <a href="book_right.php" target="rightFrame" class="block p-2 rounded-lg hover:bg-primary/5 text-gray-700 menu-transition">
                                    图书统计
                                </a>
                            </li>
                            <li>
                                <a href="book_list.php" target="rightFrame" class="block p-2 rounded-lg hover:bg-primary/5 text-gray-700 menu-transition">
                                    新书管理
                                </a>
                            </li>
                            <li>
                                <a href="add_book.php" target="rightFrame" class="block p-2 rounded-lg hover:bg-primary/5 text-gray-700 menu-transition">
                                    新书入库
                                </a>
                            </li>
                        </ul>
                    </li>
                    <!-- 其他模块代码保持不变 -->
                    <li class="menu-item">
                        <button class="w-full flex items-center justify-between p-3 text-left rounded-lg hover:bg-primary/5 menu-transition" onclick="toggleSubmenu(this)">
                            <div class="flex items-center">
                                <i class="fa-solid fa-paperclip text-primary mr-3 menu-icon"></i>
                                <span>图书附件</span>
                            </div>
                            <i class="fa-solid fa-chevron-down text-xs text-gray-500 menu-transition"></i>
                        </button>
                        <ul class="submenu mt-1 ml-10 space-y-1 hidden menu-transition">
                            <li>
                                <a href="upload.php" target="rightFrame" class="block p-2 rounded-lg hover:bg-primary/5 text-gray-700 menu-transition">
                                    文件上传
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <button class="w-full flex items-center justify-between p-3 text-left rounded-lg hover:bg-primary/5 menu-transition" onclick="toggleSubmenu(this)">
                            <div class="flex items-center">
                                <i class="fa-solid fa-eye text-primary mr-3 menu-icon"></i>
                                <span>图书阅览</span>
                            </div>
                            <i class="fa-solid fa-chevron-down text-xs text-gray-500 menu-transition">
                            </i>
                        </button>
                        <ul class="submenu mt-1 ml-10 space-y-1 hidden menu-transition">
                            <li>
                                <a href="insert_book.php" target="rightFrame" class="block p-2 rounded-lg hover:bg-primary/5 text-gray-700 menu-transition">
                                    添加图书信息
                                </a>
                            </li>
                            <li>
                                <a href="book_display.php" target="rightFrame" class="block p-2 rounded-lg hover:bg-primary/5 text-gray-700 menu-transition">
                                    图书浏览
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <button class="w-full flex items-center justify-between p-3 text-left rounded-lg hover:bg-primary/5 menu-transition" onclick="toggleSubmenu(this)">
                            <div class="flex items-center">
                                <i class="fa-solid fa-cog text-primary mr-3 menu-icon"></i>
                                <span>系统设置</span>
                            </div>
                            <i class="fa-solid fa-chevron-down text-xs text-gray-500 menu-transition"></i>
                        </button>
                        <ul class="submenu mt-1 ml-10 space-y-1 hidden menu-transition">
                            <li>
                                <a href="password_update.php" target="rightFrame" class="block p-2 rounded-lg hover:bg-primary/5 text-gray-700 menu-transition">
                                    修改密码
                                </a>
                            </li>
                            <li>
                                <a href="denlurizhi.php" target="rightFrame" class="block p-2 rounded-lg hover:bg-primary/5 text-gray-700 menu-transition">
                                    登录日志
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <button class="w-full flex items-center justify-between p-3 text-left rounded-lg hover:bg-primary/5 menu-transition" onclick="toggleSubmenu(this)">
                            <div class="flex items-center">
                                <i class="fa-solid fa-info-circle text-primary mr-3 menu-icon"></i>
                                <span>关于我们</span>
                            </div>
                            <i class="fa-solid fa-chevron-down text-xs text-gray-500 menu-transition"></i>
                        </button>
                        <ul class="submenu mt-1 ml-10 space-y-1 hidden menu-transition">
                            <li>
                                <a href="me.php" target="rightFrame" class="block p-2 rounded-lg hover:bg-primary/5 text-gray-700 menu-transition">
                                    关于我们
                                </a>
                            </li>
                            <li>
                                <a href="map.php" target="rightFrame" class="block p-2 rounded-lg hover:bg-primary/5 text-gray-700 menu-transition">
                                    区域地图
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </aside>
    <script>
        // 禁止右键菜单
        document.addEventListener('contextmenu', (e) => e.preventDefault());
        // 禁止文本选择
        document.addEventListener('selectstart', (e) => e.preventDefault());
        // 禁止拖拽
        document.addEventListener('dragstart', (e) => e.preventDefault());

        function toggleSubmenu(button) {
            const submenu = button.nextElementSibling;
            const icon = button.querySelector('.fa-chevron-down');
            document.querySelectorAll('.submenu').forEach(item => {
                if (item !== submenu && !item.classList.contains('hidden')) {
                    item.classList.add('hidden');
                    item.previousElementSibling.querySelector('.fa-chevron-down').classList.remove('rotate-180');
                }
            });
            
            submenu.classList.toggle('hidden');
            icon.classList.toggle('rotate-180');
        }

        document.addEventListener('DOMContentLoaded', function() {
            const firstMenu = document.querySelector('.menu-item button');
            if (firstMenu) {
                firstMenu.click();
            }
        });
    </script>
</body>
</html>